<template>
  <Card>
    <Tabs value="name1" v-model="SelectMarketing">
      <Tab-pane label="KPI数据" name="name1">
        <Row>
          <Col span="6">
            <Select v-model="model1" style="width:200px;margin-bottom:2vh;" @on-change="FetchmarketpandectList"  clearable>
                <Option value="0" selected="selected">整体KPI</option>
                <Option v-for="item in campaignInstList" :value="item.id" :key="item.value" >{{ item.name }}</Option>
            </Select>
          </Col>
          <Col span="6" push="16">
              <Button type="success">下载</Button>
          </Col>
        </Row>

        <Card v-if="effectoverview==true" class="effectoverview">
          <h3 slot="title" class="title">效果总览</h3>
          <p>
            <Row>
              <Col span="4">
                <Card :bordered="false">
                  <p slot="title"  style="text-align:center;">目标人群总数</p>
                  <p  style="text-align:center;">{{effectoverviewlist.total_target_count}}</p>
                </Card>
              </Col>
              <Col span="4">
                <Card :bordered="false">
                  <p slot="title">短信触达人数</p>
                  <p>{{effectoverviewlist.total_sms_count}}</p>
                </Card>
              </Col>
              <Col span="4">
                <Card :bordered="false">
                  <p slot="title">微信触达人数</p>
                  <p>{{effectoverviewlist.total_wx_count}}</p>
                </Card>
              </Col>
              <Col span="4">
                <Card :bordered="false">
                  <p slot="title">线下优惠券触达人数</p>
                  <p>{{effectoverviewlist.total_coupon_count}}</p>
                </Card>
              </Col>
              <Col span="4">
                <Card :bordered="false">
                  <p slot="title">积分发放人数</p>
                  <p>{{effectoverviewlist.total_points_count}}</p>
                </Card>
              </Col>
              <Col span="4">
                <Card :bordered="false">
                  <p slot="title">总响应人数</p>
                  <p>{{effectoverviewlist.total_response_count}}</p>
                </Card>
              </Col>
            </Row>
            <Row>
              <Col span="4">
                <Card :bordered="false">
                  <p slot="title">付款金额</p>
                  <p>{{effectoverviewlist.total_payment}}</p>
                </Card>
              </Col>
              <Col span="4">
                <Card :bordered="false">
                  <p slot="title">总投入成本</p>
                  <p>{{effectoverviewlist.total_cost}}</p>
                </Card>
              </Col>
              <Col span="4">
                <Card :bordered="false">
                  <p slot="title">响应率</p>
                  <p>{{effectoverviewlist.response_rate}}</p>
                </Card>
              </Col>
              <Col span="4">
                <Card :bordered="false">
                  <p slot="title">ROI</p>
                  <p>{{effectoverviewlist.roi_rate}}</p>
                </Card>
              </Col>
            </Row>
          </p>
        </Card>

        <Card style="margin-top:1%" v-if="smsmarketingeffects==true" class="smsmarketingeffect">
          <h3 slot="title" class="title">短信营销效果</h3>
          <p>
            <Row>
              <Col span="4">
              <Card :bordered="false">
                <p slot="title">短信发送人数</p>
                <p>{{smsResponseslist.response_count}}</p>
              </Card>
              </Col>

              <Col span="4">
              <Card :bordered="false">
                <p slot="title">短信投入成本</p>
                <p>{{smsResponseslist.total_cost}}</p>
              </Card>
              </Col>

              <Col span="4">
              <Card :bordered="false">
                <p slot="title">付款金额</p>
                <p>{{smsResponseslist.payment_order_amount}}</p>
              </Card>
              </Col>

              <Col span="4">
              <Card :bordered="false">
                <p slot="title">投入产出比</p>
                <p>{{smsResponseslist.roi_rate}}</p>
              </Card>
              </Col>

              <Col span="4">
              <Card :bordered="false">
                <p slot="title">响应率</p>
                <p>{{smsResponseslist.response_rate}}</p>
              </Card>
              </Col>
              <Col span="4">
              <Card :bordered="false">
                <p slot="title">付款人数</p>
                <p>{{smsResponseslist.payment_member_count}}</p>
              </Card>
              </Col>
            </Row>

            <Row>
              <Col span="4">
              <Card :bordered="false">
                <p slot="title">下单未付款人数</p>
                <p>{{smsResponseslist.no_payment_member_count}}</p>
              </Card>
              </Col>

              <Col span="4">
              <Card :bordered="false">
                <p slot="title">付款订单笔数</p>
                <p>{{smsResponseslist.payment_order_count}}</p>
              </Card>
              </Col>

              <Col span="4">
              <Card :bordered="false">
                <p slot="title">拍下订单笔数

                </p>
                <p>{{smsResponseslist.total_order_count}}</p>
              </Card>
              </Col>

              <Col span="4">
              <Card :bordered="false">
                <p slot="title">付款商品件数

                </p>
                <p>{{smsResponseslist.payment_product_count}}</p>
              </Card>
              </Col>

              <Col span="4">
              <Card :bordered="false">
                <p slot="title">订单支付率

                </p>
                <p>{{smsResponseslist.order_payment_rate}}</p>
              </Card>
              </Col>

              <Col span="4">
              <Card :bordered="false">
                <p slot="title">客单价

                </p>
                <p>{{smsResponseslist.avg_basket_size}}</p>
              </Card>
              </Col>

            </Row>
            <Row>
              <Col span="4">
              <Card :bordered="false">
                <p slot="title">货单价 </p>
                <p>{{smsResponseslist.avg_product_qty}}</p>
              </Card>
              </Col>
            </Row>
          </p>
        </Card>

        <Card style="margin-top:1%"  v-if="couponmarketingeffect==true" class="couponmarketingeffect">
          <h3 slot="title" class="title">线下优惠券营销效果</h3>
          <p>
            <Row>

              <Col span="4">
              <Card :bordered="false">
                <p slot="title">优惠券发送人数</p>
                <p>{{couponResponseslist.send_count}}</p>
              </Card>
              </Col>


              <Col span="4">
              <Card :bordered="false">
                <p slot="title">线下消费人数</p>
                <p>{{couponResponseslist.payment_member_count}}</p>
              </Card>
              </Col>


              <Col span="4">
              <Card :bordered="false">
                <p slot="title">优惠券使用人数</p>
                <p>{{couponResponseslist.response_count}}</p>
              </Card>
              </Col>


              <Col span="4">
              <Card :bordered="false">
                <p slot="title">线下销售金额</p>
                <p>{{couponResponseslist.payment_order_amount}}</p>
              </Card>
              </Col>

              <Col span="4">
              <Card :bordered="false">
                <p slot="title">用卡率</p>
                <p>{{couponResponseslist.response_rate}}</p>
              </Card>
              </Col>

              <Col span="4">
                <Card :bordered="false">
                  <p slot="title">优惠券使用率</p>
                  <p>{{couponResponseslist.roi_rate}}</p>
                </Card>
              </Col>
            </Row>
          </p>
        </Card>

        <Card style="margin-top:1%" v-if="wxmarketingeffect==true" class="wxmarketingeffect">
          <h3 slot="title" class="title">微信营销效果</h3>
          <p>
            <Row>
              <Col span="4">
              <Card :bordered="false">
                <p slot="title">微信发送人数</p>
                <p>{{wxResponseslist.response_count}}</p>
              </Card>
              </Col>

              <Col span="4">
              <Card :bordered="false">
                <p slot="title">微信投入成本</p>
                <p>{{wxResponseslist.total_cost}}</p>
              </Card>
              </Col>

              <Col span="4">
              <Card :bordered="false">
                <p slot="title">付款金额</p>
                <p>{{wxResponseslist.payment_order_amount}}</p>
              </Card>
              </Col>

              <Col span="4">
              <Card :bordered="false">
                <p slot="title">投入产出比</p>
                <p>{{wxResponseslist.roi_rate}}</p>
              </Card>
              </Col>

              <Col span="4">
              <Card :bordered="false">
                <p slot="title">响应率</p>
                <p>{{wxResponseslist.response_rate}}</p>
              </Card>
              </Col>
              <Col span="4">
              <Card :bordered="false">
                <p slot="title">付款人数</p>
                <p>{{wxResponseslist.payment_member_count}}</p>
              </Card>
              </Col>
            </Row>

            <Row>
              <Col span="4">
              <Card :bordered="false">
                <p slot="title">下单未付款人数</p>
                <p>{{wxResponseslist.no_payment_member_count}}</p>
              </Card>
              </Col>

              <Col span="4">
              <Card :bordered="false">
                <p slot="title">付款订单笔数</p>
                <p>{{wxResponseslist.payment_order_count}}</p>
              </Card>
              </Col>

              <Col span="4">
              <Card :bordered="false">
                <p slot="title">拍下订单笔数

                </p>
                <p>{{wxResponseslist.total_order_count}}</p>
              </Card>
              </Col>

              <Col span="4">
              <Card :bordered="false">
                <p slot="title">付款商品件数

                </p>
                <p>{{wxResponseslist.payment_product_count}}</p>
              </Card>
              </Col>

              <Col span="4">
              <Card :bordered="false">
                <p slot="title">订单支付率

                </p>
                <p>{{wxResponseslist.order_payment_rate}}</p>
              </Card>
              </Col>

              <Col span="4">
              <Card :bordered="false">
                <p slot="title">客单价

                </p>
                <p>{{wxResponseslist.avg_basket_size}}</p>
              </Card>
              </Col>

            </Row>
            <Row>
              <Col span="4">
              <Card :bordered="false">
                <p slot="title">货单价 </p>
                <p>{{wxResponseslist.avg_product_qty}}</p>
              </Card>
              </Col>
            </Row>
          </p>
        </Card>
      </Tab-pane>


      <Tab-pane label="商品销售情况" name="name2">
        <Row>
          <Col span="6" style="margin-left:1vw;">
          <Select v-model="model2" style="width:200px;margin-bottom:2vh;" @on-change="Merchandising"  clearable>
            <Option value="0" selected="selected">整体商品销售情况</Option>
            <Option v-for="item in campaignInstList" :value="item.id" :key="item.value" >{{ item.name }}</Option>
          </Select>
          </Col>
          <Col span="6" push="16">
          <Button type="success">下载</Button>
          </Col>
        </Row>
        <Row>
          <Col style="margin-left:1vw;">
            <Table :loading="TableLoading" :data="promarketingeffectlist" :columns="columns1" ref="table"></Table>
          </Col>
        </Row>
        <Row type="flex" justify="center">
          <Col>
            <Page :total="total" show-total show-sizer show-elevator @on-change="changeCurrent" @on-page-size-change="changePageSize" :current.sync="current" style="margin: 24px 0 24px;text-align:right"></Page>
          </Col>
        </Row>
      </Tab-pane>
      <a href="#" slot="extra" @click.prevent="returnTable()" style="float:right">
        <Icon type="arrow-left-c"></Icon>
        返回
      </a>
    </Tabs>
    <router-view></router-view>
  </Card>
</template>
<script>
import { fetchMarketingreport,fetchmarketReportProductQuery,fetchmarketCampaignInstList } from '@/api/marketing'
  export default {
    data() {
      return {
        SelectMarketing: "",
        campaignInstList:[],
        TableLoading: false, // 分页loading
        DateReady: false, // 判断异步数据加载完成，避免报错
        loading: false, // save
        campaignId:this.$route.params.id,
        batchid:'',
        effectoverviewlist:{},
        smsResponseslist:{},
        couponResponseslist:{},
        wxResponseslist:{},
        promarketingeffectlist:[], //商品营销效果列表
        total:10,
        size:10,
        pages:1,
        current:1,
        model1: '',
        model2: '',
        effectoverview:false,  // 效果总览状态
        smsmarketingeffects:false, //短信营销总览
        couponmarketingeffect:false, //优惠券营销效果
        wxmarketingeffect:false, //微信营销效果
        columns1: [{
            title: "商品名称",
            key: "productName",
            align: "center"
          },
          {
            title: "商品价格",
            key: "price",
            align: "center"
          },
          {
            title: "付款人数",
            key: "paymentMemberCount",
            align: "center"
          },

          {
            title: "付款金额",
            key: "paymentOrderAmount",
            align: "center"
          },

          {
            title: "商品数量",
            key: "quantity",
            align: "center"
          }
        ]
      };
    },
    watch: {
      SelectMarketing: {
        handler(val) {
          if (val == 'name1') {
            // this.KPIData()
          } else {
            this.Merchandising()
          }
        },

      },


    },
    methods: {
      //分页
      changePageSize(pageSize) {
        this.pageSize = pageSize;
        this.Merchandising();
      },
      changeCurrent(current) {
        this.pageNum = current;
        this.Merchandising();
      },
      //商品销售情况
      Merchandising() {
        this.TableLoading = true;
        this.load = true;
        var reqParams = {
          campaignId:this.campaignId,
          campaign_inst_id:this.model2,
          pageNum:this.pageNum,
          pageSize:this.pageSize
        };
        fetchmarketReportProductQuery(reqParams).then(res => {
            this.TableLoading = false;
            if (res.data.code == 200) {
              if( res.data.result && res.data.result.records){
                this.promarketingeffectlist = res.data.result.records;
                this.pageNum = res.data.result.current;
                this.pageSize = res.data.result.size;
                this.total = res.data.result.total;
              }
            }
          }).catch(error=>{
              this.$Message.error('操作失败！');
          });
      },
      // 请求营销活动批次下拉列表
      FetchmarketCampaignInstList() {

        var reqParams = {
          campaignId:this.campaignId
        };
        fetchmarketCampaignInstList(reqParams).then(res => {
          this.TableLoading = false;
            if (res.data.code == 200) {//TODO
              if( res.data.result && res.data.result.campaignInstList){
                this.campaignInstList = res.data.result.campaignInstList;
              }
            }
          }).catch(error=>{
              this.$Message.error('操作失败！');
          });;
      },
      // 请求营销效果总览
      FetchmarketpandectList() {
        var reqParams = {
          campaignId: this.campaignId,
          campaign_inst_id:this.model1
        };
        fetchMarketingreport(reqParams).then(res => {
            if ( res.data.code == 200) {
                if(Object.keys(res.data.result.campaignReport).length == 0){   // 效果总览状态
                    this.$Message.warning("暂时还没有营销效果报告数据,请稍后再试......");
                    this.effectoverview = false;
                }else{
                    this.effectoverview = true;
                    this.effectoverviewlist = res.data.result.campaignReport;
                }
                if(Object.keys(res.data.result.smsResponses).length == 0 ){     //短信营销总览
                      this.smsmarketingeffects = false;
                  }else{
                      this.smsmarketingeffects = true;
                      this.smsResponseslist = res.data.result.smsResponses;
                  }
                  if(Object.keys(res.data.result.couponResponses).length == 0){     //优惠券营销效果
                      this.couponmarketingeffect = false;
                  }else{
                      this.couponmarketingeffect = true;
                      this.couponResponseslist = res.data.result.couponResponses;
                  }
                  if(Object.keys(res.data.result.wxResponses).length == 0){     //微信营销效果
                      this.wxmarketingeffect = false;
                  }else{
                      this.wxmarketingeffect = true;
                      this.wxResponseslist = res.data.result.wxResponses;
                  }
            }
          }).catch(error=>{
          });
      },
      download() {
        this.$Modal.confirm({
          title: "下载确认",
          content: `是否确认下载`,
          onOk: function() {
            this.$Loading.start();
            var reqParams = {
              user_id: params.row.user_id
            };

            this.func.ajaxPost(this.api.baseUrl + "/sysUser/delUser.do",this.qs.stringify(reqParams),res => {
                this.loading = false;
                if (res.data.success) {
                  this.$Message.info("下载成功！");
                } else {
                  this.$Message.error("下载失败!请稍后再试...!");
                }
              }
            );
          }
        });
      },
      returnTable() {
        this.$router.back(-1)
      },
      changearray(){
        for(let i in this.effectoverviewlist){
          var arr = [];
          arr.push(this.effectoverviewlist[i])
        }

      }
    },
    mounted () {

    },
    created() {
      this.FetchmarketpandectList();
      this.FetchmarketCampaignInstList();

    },

  };
</script>
<style lang="scss" scoped>
@import "../../styles/common.scss";
.effectoverview, .smsmarketingeffect, .couponmarketingeffect, .wxmarketingeffect{
  .title{
    @include customer_title_global;
    font-size: 1.1rem;
    font-weight: bolder;
  }
  p{
    text-align: center;
  }
}
</style>

